<template>
  <div>
<h1>房号列表</h1>
    <div>
      房间名称：<input type="text" v-model="info.houseNoName"/>
      门店 <select v-model="info.shopId">
      <option value="">请选择</option>
      <option :value="item.id" v-for="item in data1.list">
        {{ item.ShopName }}
      </option>
    </select>
      房型：<select v-model="info.houseTypeId">
      <option value="">请选择</option>
      <option :value="item.Id" v-for="item in data2.list">
        {{ item.HouseTypeName }}
      </option>
    </select>
      房态 <select v-model="info.houseState">
      <option value="">请选择</option>
      <option :value="1">空闲</option>
      <option :value="2">已预约</option>
      <option :value="3">已入住</option>
    </select>
  <input type="button" value="查询" class="btn btn-primary" @click="getlist"/>
      <input type="button" value="导出" class="btn btn-success" @click="fn"/>
      <input type="file" @change="fn1"/>
      <input type="button" value="导入" class="btn btn-info" @click="fn3"/>
    </div>
    <table class="table table-bordered">
      <tbody>
      <tr>
        <td>id</td>
        <td>房号名称</td>
        <td>房型名称</td>
        <td>房型图片</td>
        <td>房型价格</td>
        <td>房型面积</td>
        <td>门店名称</td>
        <td>房态</td>
        <td>创建时间</td>
        <td>操作</td>

      </tr>
      <tr v-for="item in data.list">
        <td>{{item.Id}}</td>
        <td>{{item.HouseNoName}}</td>
        <td>{{ item.HouseTypeName }}</td>
        <td><img :src="item.Photo" width="100" height="100"></td>
        <td>{{ item.Money.toFixed(2) }}</td>
        <td>{{ item.Area }}</td>
        <td>{{item.ShopName}}</td>
        <td v-if="item.HouseState==1">空闲</td>
        <td v-if="item.HouseState==2">已预约</td>
        <td v-if="item.HouseState==3">已入住</td>
        <td>{{ moment(item.CreateTime).format("YYYY-MM-DD hh:mm:ss") }}</td>
        <td>
          <input type="button" value="修改" class="btn btn-warning"/>
          <input type="button" value="删除" class="btn btn-danger"/>
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <span>共<b>{{data.totalCount}}</b>条</span>
      <span>当前第<b>{{info.pageIndex}}</b>页</span>
      <span><b>{{info.pageIndex}}</b></span>/<span><b>{{data.totalPage}}</b></span>

      <input type="button" value="首页" class="btn btn-warning" @click="page(1)"/>
      <input type="button" value="上一页" class="btn btn-warning" @click="page(info.pageIndex-1)"/>
      <span v-for="item in data.totalPage" @click="page(item)">{{item}}</span>
      <input type="button" value="下一页" class="btn btn-warning" @click="page(info.pageIndex+1)"/>
      <input type="button" value="尾页" class="btn btn-warning" @click="page(data.totalPage)"/>

      <input type="number" v-model="info.pageIndex"/>
      <input type="button" value="跳转" @click="page(info.pageIndex)" class="btn btn-warning"/>


      <select  v-model="info.pageSize" @change="getlist">
        <option :value="item" v-for="item in arr">每页{{item}}条</option>
      </select>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const fn=()=>{
  location.href="http://localhost:5243/api/House/ExprotExcel";
}
let obj=ref();
//获取文件
const fn1=(e:any)=>{
   obj.value=e.target.files[0];
}
const fn3=()=>{
  //1.将获取的文件转成formdate格式
  let f=new FormData();
  f.append('file',obj.value);
  //发送axios
  axios({
    url:'/api/House/ImprotHouseNo',
    method:'post',
    data:f
  }).then((res)=>{
    console.log(res);
    if(res.data>0){
      alert("导出来啦")
      getlist();
    }
    else {
      alert("没导出来")
      return;
    }
  }).catch((err)=>{
    console.log(err);
  })
}
//声明一个变量存储向后端传递的参数
let info1:any=reactive({
  pageIndex:1,
  pageSize:100,
  shopName:"",
  address:""
});

onMounted(() => {
  getShopList();
  getlists();
})

//声明一个变量接受数据
let data1:any =reactive({
  list:[],
  totalCount:0,
  totalPage:0,
})

const  getShopList = () => {
  axios({
    url:'/api/Shop/GetShopList',
    params:info1,
    method:'get'

  }).then((res) => {
    console.log(res)
    data1.list=res.data.list
    data1.totalCount=res.data.totalCount
    data1.totalPage=res.data.totalPage
    //Object.assign(data,res.data);

  })
}
///定义发送
let info2:any=reactive({
  pageindex:1,
  pagesize:100,
  housename:"",
  area1:"",
  area2:"",
})
//定义接受
let data2:any=reactive({
  totalcount:"",
  totalpage:"",
  list:[]
})
const getlists=()=>{
  axios({
    url:"/api/House/GetHouseList",
    method:"get",
    params:info2
  }).then((res)=>{
    console.log(res)
    data2.totalcount = res.data.totalcount
    data2.totalpage = res.data.totalpage
    data2.list = res.data.list
  })
}













let arr:any=reactive([2,4,6,8,10])
const page=(num:any)=>{
  if(num<=0)
  {
    info.pageIndex=1;
  }
  if(num>data.totalPage)
  {
    info.pageIndex=data.totalPage;
  }
  info.pageIndex=num;
  getlist();
}
onMounted(() => {
  getlist();
})

//发送数据
let info:any=reactive({
  pageIndex:1,
  pageSize:2,
  houseNoName:"",
  shopId:"",
  houseTypeId:"",
  houseState:"",
})
//接受数据
let data:any=reactive({
  list:[],
  totalCount:"",
  totalPage:""
})
//获取房号列表
const getlist=()=>{
 axios({
   url:'/api/House/GetHouseNoList',
   method:'get',
   params:info,
 }).then((res)=>{
   console.log(res)
   data.list = res.data.list
   data.totalCount = res.data.totalCount
   data.totalPage = res.data.totalPage
 })
}
</script>

<style>
span{
  margin:0 10px;
}
b{
  color:red;
}
</style>